<template>
  <button ref="_ref" class="dong-button"
    :class="{ [`dong-button--${type}`]: type, [`dong-button--${size}`]: size, 'is-plain': plain, 'is-round': round, 'is-disabled': disabled || loading }"
    :disabled="disabled || loading">
    <Dong-Icon icon="spinner" spin v-if="loading" />
    <Dong-Icon v-if="icon" :icon="icon" />
    <span v-if="$slots.default">
      <slot />
    </span>
  </button>
</template>

<script setup>
import { ref } from 'vue'
import propObj from './props'
defineOptions({ name: 'DongButton' })
defineProps(propObj)
const _ref = ref(null)
defineExpose({
  ref: _ref
})
</script>

<style lang="scss" scoped></style>
